import { defineStore } from 'pinia';
import { SettingState } from '@/types/store/setting';
import defaultSettings from '../../settings';
import { localStorage } from '@/utils/storage';

// 默认设置，从下面获取
// const defaultSettings: DefaultSettings = {
//   title: 'vue3-element-admin',
//   showSettings: true,
//   tagsView: true,
//   fixedHeader: false,
//   // 是否显示Logo
//   sidebarLogo: true,
//   errorLog: 'production'
// };
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings;
const el = document.documentElement;

export const useSettingStore = defineStore({
  id: 'setting',
  state: (): SettingState => ({
    // 主题
    theme:
      localStorage.get('theme') ||
      getComputedStyle(el).getPropertyValue(`--el-color-primary`),
    // 显示设置
    showSettings: showSettings,
    tagsView:
      localStorage.get('tagsView') != null
        ? localStorage.get('tagsView')
        : tagsView,
    // 固定header
    fixedHeader: fixedHeader,
    // 侧边栏logo
    sidebarLogo: sidebarLogo,
  }),
  actions: {
    // 改变设置
    async changeSetting(payload: { key: string; value: any }) {
      const { key, value } = payload;
      switch (key) {
        case 'theme':
          this.theme = value;
          break;
        case 'showSettings':
          this.showSettings = value;
          break;
        case 'fixedHeader':
          this.fixedHeader = value;
          break;
        case 'tagsView':
          this.tagsView = value;
          localStorage.set('tagsView', value);
          break;
        case 'sidebarLogo':
          this.sidebarLogo = value;
          break;
        default:
          break;
      }
    },
  },
});

export default useSettingStore;
